<template>
    <div>
        <Modal width="1200"
               v-model="modal.bindingvideoFlag"
               @on-ok="ok"
               @on-cancel="cancel"
               :styles="{top: '20px'}"
               :loading="loading"
               title="目录">
            <div style="max-height:800px;overflow-y:auto;overflow-x:hidden;">
                <Tree :data="treeNodes" :render="treeNodeRender"></Tree>
            </div>
        </Modal>
        <video-manager :videoModal="videoModal"></video-manager>
    </div>
</template>

<script>
    import {classTreedata} from '@/libs/util'
    import videoManager from "@c/course/class/videoManager"
    export default {
       props:{
           modal: {
               bindingvideoFlag:false,
               class: {}
           },
       },
        data(){
            return{
                videoModal:{
                    videoManagerFlag:false,
                    classId:null
                },
                loading:true,
                treeNodes: [
                    {
                        title: '',
                        expand: true,
                        type: "class",
                        classId: null,
                        children: [],
                    }
                ],
                SelectedList:[],
                VideoList:[],
            }
        },
        methods:{
            ok(){
                let list = Array();
                this.treeNodes[0].children.forEach(index=>{
                    index.videoSelected.forEach(item=>{list.push({"chapterId":index.chapterId,"videoId":item})})
                })
                this.http.post("/class/saveBindingVideo",this.qs.parse({"list":list,"classId":this.modal.class.classId}))
                .then(res=>{
                    if(res.data){
                        this.loading = false
                        this.$Message.success("操作成功")
                        this.$parent.modal.bindingvideoFlag = false
                        Object.assign(this.$data, this.$options.data())
                    }else {
                        this.loading = false
                        this.$Message.success("失败了啊")
                    }

                })

            },
            cancel(){
                this.$parent.modal.bindingvideoFlag = false
                Object.assign(this.$data, this.$options.data())
            },
            /**
             *目录渲染
             */
            treeNodeRender(h, {root, node, data}){
                return (
                    <div style="width:1100px">
                        <div style="float:left">
                            <Icon type={data.type == "class" ? 'ios-book' : 'md-pricetag'}/>
                            <Tag color={data.type == "class" ? 'primary'  : 'magenta'}>{data.title}</Tag>
                        </div >
                        <div style="float:right" v-show={data.type=="class"}>
                            <Row>
                                <i-col span="10">
                                    <h3>{this.SelectedList.length}/{this.VideoList.length}</h3>
                                </i-col>
                                <i-col span="10">
                                    <i-button onClick={()=>{this.videoModal.videoManagerFlag = true,
                                                            this.$parent.modal.bindingvideoFlag = false}}
                                              type="success" icon="md-reorder"  size="small">视频管理</i-button>
                                </i-col>
                            </Row>
                        </div>
                        <div style="float:right" v-show={data.type!="class"}>
                           <Transfer
                           data={this.VideoList}
                           filterable
                           target-keys={data.videoSelected}
                           onOn-selected-change = {this.Onselectedchange}
                           list-style = {{width:"400px",height: '243px'}}
                           onOn-change={(newTargetKeys, direction, moveKeys)=>{
                               try {
                                       if(direction=="left"){
                                           this.VideoList.forEach((index,index2)=>{
                                           moveKeys.forEach(item=>{
                                               if(index.key == item){index.label = index.label.replace("[-√-]","") }
                                           })
                                       })
                                       }else {
                                           if(this.SelectedList.filter(f=>moveKeys.includes(f)).length>0){
                                               throw new Error("不能穿梭已打钩的选项")
                                           }else {
                                               this.VideoList.forEach(index=> {
                                                   moveKeys.forEach(item => {
                                                       if (index.key == item) { index.label = "[-√-]" + index.label }
                                                   })
                                               })
                                           }
                                       }
                                   data.videoSelected = newTargetKeys
                               }catch (e) {this.$Message.error(""+e)}
                               this.SelectedList = []
                               this.treeNodes[0].children.forEach(index=>{
                                   index.videoSelected.forEach(item=>{this.SelectedList.push(item) })
                               })
                           }}></Transfer>
                        </div>
                    </div>
                );
            },
            /**
             * 获取目录
             */
            getdirectoryById(val) {
                this.http.post("/class/getdirectoryById", this.qs.stringify({'classId': val})).then(res => {
                    if (res.data) {
                        this.treeNodes[0].children = classTreedata(res.data)
                        this.getvideoList()
                    }
                })
            },
            /**
             * 获取视频列表
             */
            getvideoList(){
                this.http.get("/class/getvideoList"+this.videoModal.classId)
                    .then(res=>{
                        if(res.data){
                          this.VideoList = res.data.map(m=>{return {"key":m.resourceId,"label":m.resourceTitle}})
                            this.handlerData()
                        }
                    })
            },
            Onselectedchange(sourceSelectedKeys){
            return this.SelectedList.filter(index=>sourceSelectedKeys.includes(index)).length>0?this.$Message.error("选中的项已存在"):null
            },
            /**
             * 给刚刚初始化一倍选中的的数据添加[-√-]
             */
            handlerData(){
                this.SelectedList = []
                this.treeNodes[0].children.forEach(index=>{
                    index.videoSelected.forEach(item=>{this.SelectedList.push(item)})
                })
                this.VideoList.filter(f=>this.SelectedList.includes(f.key)).forEach(index=>{index.label = "[-√-]" + index.label})
            }
        },
        watch:{
            'modal.bindingvideoFlag'(val){
                if(val){
                    this.getdirectoryById(this.modal.class.classId);
                    this.videoModal.classId = this.modal.class.classId
                    this.treeNodes[0].classId = this.modal.class.classId
                    this.treeNodes[0].title = this.modal.class.className
                }
            },
        },
        components:{videoManager}
    }
</script>

<style>
    .ivu-tree-title:hover{
        background-color: #ffffff;
    }
    .ivu-tree-title-selected,
    .ivu-tree-title-selected:hover{
        background-color: #ffffff;
    }
</style>